<template>
    <div class="out_box">
        <div class="relative content_box">
            <div class="case_box property_box">
                <div class="all_box">
                    <div class="case">
                        <p class="money">{{ dataList.zenumber }}</p>
                        <p class="desc">总资产 (USDT)</p>
                    </div>
                </div>
                <div class="info_box cl">
                    <div class="list">
                        <p class="desc">钱包 (注：含挖矿收益)</p>
                        <p><span class="money">{{ dataList.qbnumber }}</span> USDT</p>
                        <p class="tips">≈ ￥0.00</p>
                    </div>
                    <div class="list">
                        <p class="desc">挖矿账户  (注：产出自动归集到钱包余额)</p>
                        <p><span class="money">{{ dataList.wknumber }}</span> USDT</p>
                        <p class="tips">≈ ￥0.00</p>
                    </div>
                    <div class="list">
                        <p class="desc">佣金账户</p>
                        <p><span class="money">{{ dataList.yjnumber }}</span> USDT</p>
                        <p class="tips">≈ ￥0.00</p>
                    </div>
                    <div class="list">
                        <p class="desc">理财账户</p>
                        <p><span class="money">{{ dataList.lcnumber }}</span> USDT</p>
                        <p class="tips">≈ ￥0.00</p>
                    </div>
                    <div class="list">
                        <p class="desc">质押账户</p>
                        <p><span class="money">{{ dataList.zynumber }}</span> USDT</p>
                        <p class="tips">≈ ￥0.00</p>
                    </div>
                </div>
            </div>
            <div class="total_box mb_20">
                <p>
                    <span class="title">当前总资产估值</span>
                    <span class="money">{{ '$' + (dataList.zenumber || 0) + '或者￥' + $convertRMB(dataList.zenumber) }}</span>
                </p>
                <p class="tips">注：资产总估由历史行情估算值，仅为用户提供一个参考，请以单项资金为准</p>
            </div>
            <div class="currency_box mb_20">
                <div class="title">
                    只显示有资金的币种（隐藏0资金币种）
                    <v-switch v-model="hasMoney" @click.native="toggleWalletStatus()"></v-switch>
                </div>
                <v-tabs :active-tab-key="tabKey" type="card" @tab-click="toggleTabs">
                    <v-tab-pane tab-key="Wallet" tab="钱包">
                        <div class="wallet_box gray_table text_c">
                            <v-data-table :data='getWalletBalance' :currentData='dataWallet.records' :columns='columnsData' stripe :emptyText="not_data">
                                <template slot="td" slot-scope="props">
                                    <div class="text_l" style="padding-left: 20%;" v-if="props.column.field === 'coinName'">
                                        <img class="img mr_10" :src="img_url_appSource + props.item.currency + '.png'" />
                                        <span class="text">{{ props.content }}</span>
                                    </div>
                                    <div v-else-if="props.column.field === 'valuation'">
                                        <!--<span class="text">{{ Number(props.content).toFixed(2) }}</span>-->
                                        <span class="text">{{ props.content}}</span>
                                    </div>
                                    <div v-else-if="props.column.field === 'operate'">
                                        <span class="btn recharge">充值</span>
                                        <span class="btn withdraw" @click="jumpGetCash(props)">提现</span>
                                        <span class="btn manage">理财</span>
                                        <span class="btn pledge">质押</span>
                                    </div>
                                    <span v-else>{{ props.content }}</span>
                                </template>
                            </v-data-table>
                        </div>
                        <div class="case_box logs_box mt_20">
                            <div class="cl">
                                <h2 class="f_l bold">最近充值记录</h2>
                            </div>
                            <div class="content mt_30 gray_table">
                                <v-data-table :data='getRechargeData' :currentData='dataRechargeLog.records' :columns='columnsRechargeData' stripe :emptyText="not_data">
                                    <template slot="th" slot-scope="props">
                                        <div class="text_r" v-if="props.column.field === 'statu'">
                                            <span>{{ props.title }}</span>
                                        </div>
                                        <div class="text_c" v-else-if="props.column.field === 'height'">
                                            <span>{{ props.title }}</span>
                                        </div>
                                        <span v-else>{{ props.title }}</span>
                                    </template>
                                    <template slot="td" slot-scope="props">
                                        <div v-if="props.column.field === 'createTime'">
                                            <span>{{ props.content[0] }}<br />{{ props.content[1] }}</span>
                                        </div>
                                        <div class="text_c" v-else-if="props.column.field === 'height'">
                                            <span>{{ props.content }}</span>
                                        </div>
                                        <div class="text_r" v-else-if="props.column.field === 'statu'">
                                            <span>{{ props.content }}</span>
                                        </div>
                                        <span class="break_all" v-else>{{ props.content }}</span>
                                    </template>
                                </v-data-table>
                                <div class="pagination_box">
                                    <v-pagination @change="changeRechargePage" :total="dataRechargeLog.total" :show-total="showRechargeTotal" show-quick-jumper></v-pagination>
                                </div>
                            </div>
                        </div>
                        <div class="case_box logs_box">
                            <div class="cl">
                                <h2 class="f_l bold">最近提现记录</h2>
                            </div>
                            <div class="content mt_30 gray_table">
                                <v-data-table :data='getCashData' :currentData='dataCashLog.records' :columns='columnsCashData' stripe :emptyText="not_data">
                                    <template slot="th" slot-scope="props">
                                        <div class="text_r" v-if="props.column.field === 'statu'">
                                            <span>{{ props.title }}</span>
                                        </div>
                                        <div class="text_c" v-else-if="props.column.field === 'height'">
                                            <span>{{ props.title }}</span>
                                        </div>
                                        <span v-else>{{ props.title }}</span>
                                    </template>
                                    <template slot="td" slot-scope="props">
                                        <div v-if="props.column.field === 'createTime'">
                                            <span>{{ props.content[0] }}<br />{{ props.content[1] }}</span>
                                        </div>
                                        <div class="text_c" v-else-if="props.column.field === 'height'">
                                            <span>{{ props.content }}</span>
                                        </div>
                                        <div class="text_r" v-else-if="props.column.field === 'statu'">
                                            <span>{{ props.content }}</span>
                                        </div>
                                        <span class="break_all" v-else>{{ props.content }}</span>
                                    </template>
                                </v-data-table>
                                <div class="pagination_box">
                                    <v-pagination @change="changeCashPage" :total="dataCashLog.total" :show-total="showCashTotal" show-quick-jumper></v-pagination>
                                </div>
                            </div>
                        </div>
                    </v-tab-pane>
                    <v-tab-pane tab-key="miningAccount" tab="挖矿账户">
                        <mining-account ref="miningAccount" v-if="tabKey === 'miningAccount'" :hasMoney="hasMoney" />
                    </v-tab-pane>
                    <v-tab-pane tab-key="salesCommission" tab="佣金账户">
                        <sales-commission ref="salesCommission" v-if="tabKey === 'salesCommission'" :hasMoney="hasMoney" :commission="commissionType" />
                    </v-tab-pane>
                    <v-tab-pane tab-key="4" tab="理财账户">
                        <div class="text_c mt_20">{{ not_data }}</div>
                    </v-tab-pane>
                    <v-tab-pane tab-key="5" tab="质押账户">
                        <div class="text_c mt_20">{{ not_data }}</div>
                    </v-tab-pane>
                </v-tabs>
            </div>
        </div>
    </div>
</template>

<script>
    import { getWalletBalance, getYourBalance, getCashLog, getRechargeLog } from '@doapis/personal/wallet.js';

    export default {
        name: "Wallet",
        components: {
            miningAccount: (resolve) => require(['./mining_account.vue'],resolve),
            salesCommission: (resolve) => require(['./sales_commission.vue'],resolve),
        },
        data: function() {
            return {
                dataList: {},
                dataWallet: { records: [] },    // 钱包
                dataCashLog: {},                // 提现
                pageCash: 1,
                dataRechargeLog: {},            // 充值
                pageRecharge: 1,
                hasMoney: false,                // 是否只显示有资金的币种
                tabKey: 'Wallet',               // 标签页当前值
                commissionType: 1,
                columnsData:[
                    { title:"币种", field:'coinName', width: '16%' },
                    { title:"持有数量", field:'heldNumber', width: '16%' },
                    { title:"锁定数量", field:'locksNumber', width: '16%' },
                    { title:"可用数量", field:'usableNumber', width: '16%' },
                    { title:"估值($)", field:'valuation', width: '14%' },
                    { title:"操作", field:'operate', width: '28%' }
                ],
                columnsCashData:[
                    { title:"时间", field:'createTime', width: '11%' },
                    { title:"单号", field:'cperiod', width: '17%' },
                    { title:"金额", field:'cnumber', width: '11%' },
                    { title:"提现地址/转账ID", field:'address', width: '22%' },
                    { title:"确认个数", field:'qnumber', width: '7%' },
                    { title:"状态", field:'statu', width: '7%' },
                ],
                columnsRechargeData:[
                    { title:"时间", field:'createTime', width: '11%' },
                    { title:"单号", field:'id', width: '17%' },
                    { title:"金额", field:'cnumber', width: '11%' },
                    { title:"充值地址/转账ID", field:'address', width: '22%' },
                    { title:"确认个数", field:'height', width: '7%' },
                    { title:"状态", field:'statu', width: '7%' },
                ],
                labelCol: {
                    span: 6
                },
                wrapperCol: {
                    span: 16
                },
            }
        },
        computed: {
            userDATA: function() {
                const userDATA = this.$store.state.userDATA;
                return userDATA;
            },
            personalMenuKEY: function() {
                const personalMenuKEY = this.$store.state.personalMenuKEY;
                return personalMenuKEY;
            }
        },
        watch: {
            personalMenuKEY: function(val) {
                const tabName = val.key;
                if (val.key === tabName && tabName) {
                    if (this.tabKey !== tabName) {
                        if (val.commissionType) {
                            this.commissionType = val.commissionType;
                        }
                        this.toggleTabs(tabName);
                    } else {
                        this.$nextTick(function() {
                            this.commissionType = val.commissionType;
                            this.$refs[val.key].toggleType(val.commissionType);
                        });
                    }
                } else {
                    this.toggleTabs(val.src);
                }
            }
        },
        methods: {
            getData: function() {
                const that = this;
                return getYourBalance({ memberid: that.userDATA.memberid }).then(function(res) {
                    that.dataList = res.data;
                });
            },
            getWalletBalance: function() {
                const that = this;
                const hasMoney = this.hasMoney;
                return getWalletBalance({ memberid: that.userDATA.memberid, boolhasMoney: hasMoney }).then(function(res) {
                    that.dataWallet.records = res.data;
                    return { result: res.data };
                });
            },
            getCashData: function() {
                const that = this;
                return getCashLog({
                    current: that.pageCash,
                    descs: 'createtime',
                    memberid: that.userDATA.memberid
                }).then(function(res) {
                    res.data.records.forEach(function(item) {
                        let statu;
                        item.createTime = $.$getFormatMD(new Date(item.createTime), true).split(' ');
                        item.cnumber = item.cnumber + item.currency;
                        item.qnumber = '暂不显示';

                        switch(item.statu) {
                            case '1': statu = '审批中';break;
                            case '2': statu = '已通过';break;
                            case '3': statu = '驳回';break;
                        };
                        item.statu = statu;
                    });

                    that.dataCashLog = res.data;
                    return { result: res.data.records };
                });
            },
            getRechargeData: function() {
                const that = this;
                return getRechargeLog({
                    current: that.pageRecharge,
                    descs: 'createtime',
                    memberid: that.userDATA.memberid
                }).then(function(res) {
                    res.data.records.forEach(function(item) {
                        let statu;
                        item.createTime = $.$getFormatMD(new Date(item.createtime), true).split(' ');
                        item.cnumber = item.cnumber + item.currency;

                        switch(item.statu) {
                            case '1': statu = '审批中';break;
                            case '2': statu = '已通过';break;
                            case '3': statu = '已拒绝';break;
                        };
                        item.statu = statu;
                    });

                    that.dataRechargeLog = res.data;
                    return { result: res.data.records };
                });
            },
            toggleWalletStatus: function() {
                const tabKey = this.tabKey;
                if (tabKey === 'Wallet' || tabKey === 'miningAccount') {
                    tabKey === 'Wallet' ? this.getWalletBalance() : this.$refs[this.tabKey].getData();
                }
            },
            changeCashPage: function(val) {
                this.pageCash = val;
                this.getCashData();
            },
            showCashTotal: function(val) {
                return '全部' + this.dataCashLog.total + '条';
            },
            changeRechargePage: function(val) {
                this.pageRecharge = val;
                this.getRechargeData();
            },
            showRechargeTotal: function(val) {
                return '全部' + this.dataRechargeLog.total + '条';
            },
            jumpGetCash: function(params) {
                params = params.item;
                let data = {
                    coinName: params.coinName,
                    currency: params.currency,
                    // usableNumber: Number(params.usableNumber).toFixed(2)
                };
                // this.$emit('toggleMenu', data);
                this.$store.commit({
                    type: 'togglePersonalMenuKEY',
                    data: $.extend(false, data, { src: 'GetCash' })
                });
            },
            toggleTabs: function(key) {
                const that = this;
                this.tabKey = key;
                if (key === 'Wallet') {
                    this.getData();
                }
            },
            $convertRMB: $.$convertRMB
        },
        mounted: function() {
            const personalMenuKEY = this.personalMenuKEY;
            if (personalMenuKEY.key && personalMenuKEY.commissionType) {
                this.commissionType = personalMenuKEY.commissionType;
                this.toggleTabs(personalMenuKEY.key);
            } else {
                this.getData();
            }
        }
    };
</script>

<style lang="less" scoped>
    @import '~@css/root.less';

    .out_box{
        background-color: #eaeaea;
    }
    .content_box{
        .case_box{
            margin-bottom: 20px;
            padding: 25px 30px;
            background-color: white;
        }
        .property_box{
            .flex_row_wrap;
            margin-bottom: 0;
            padding: 0;
            border:1px solid #DDD;
            font-size: 13px;
            font-weight: 700;
            .money{
                color: @color_orange;
            }
            .all_box{
                width: 30%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                text-align: center;
                .case{
                    padding: 30px 0;
                    border-right: 1px solid #EDEDED;
                }
                .money{
                    font-size: 26px;
                }
            }
            .info_box{
                width: 70%;
                .list{
                    width: 33.33%;
                    float: left;
                    padding: 20px;
                    padding-left: 5%;
                    box-sizing: border-box;
                    .desc{
                        margin-bottom: 10px;
                    }
                    .tips{
                        font-weight: normal;
                        color: #999;
                    }
                }
            }
        }
        .total_box{
            padding: 10px 20px;
            color: white;
            background: linear-gradient(225deg, #56ccf2 0%, #2948ff 100%);
            .title{
                opacity: 0.6;
            }
            .money{
                opacity: 1;
            }
            .tips{
                font-size: 10px;
                opacity: 0.6;
            }
        }
        .wallet_box{
            /deep/ .ant-table-tbody>tr:nth-child(2n-1){
                background-color: #F5F6FF;
            }
            /deep/ .ant-table-tbody>tr:nth-child(2n){
                background-color: white;
            }
        }
        .currency_box{
            font-size: 13px;
            /deep/ .ant-switch-checked{
                border-color: #29cc00;
                background-color: #29cc00;
            }
            /deep/ .ant-tabs-tab, /deep/ .ant-tabs-bar{
                margin-bottom: 0;
                border: none;
                background-color: #f9f9f9;
            }
            /deep/ .ant-tabs-tab{
                width: 20%;
                padding: 16px;
                text-align: center;
                border-top: 4px solid white;
                border-radius: 0;
            }
            /deep/ .ant-tabs-tab-active{
                .font_black;
                background: white;
                border-color:  blue;
            }
            /deep/ .ant-tabs-nav{
                width: 100%;
            }
            >.title{
                padding: 20px;
                background-color: white;
            }
            .img{
                width: 26px;
                display: inline;
                vertical-align: middle;
            }
            .text{
                vertical-align: middle;
            }
            .btn{
                display: inline-block;
                margin: 0 2px;
                padding: 0 8px;
                font-size: 10px;
                line-height: 22px;
                color: white;
                border-radius: 34px;
                cursor: pointer;
                &.recharge{
                    background-color: #29cc00;
                }
                &.withdraw{
                    background: linear-gradient(139deg,#56CCF2 0%,#2948FF 100%);
                }
                &.manage{
                    background-color: #eeaf00;
                }
                &.pledge{
                    background: linear-gradient(139deg, #ff9100 0%, #ff3c00 100%);
                }
            }
            .box{
            }
        }
        .logs_box{
        }
    }
</style>
